<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta content="telephone=no" name="format-detection" />
    <!-- 留作将来统一添加 -->
    <TEMPLATE>${TEMPLATE}</TEMPLATE>
    <title>卡拉OK</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/index.css">
    <link rel="stylesheet" type="text/css" href="../../css/data-flex.min.css">
    <style type="text/css">
    html,
    body {
        background: rgba(255, 255, 255, 1);
    }

    .video {
        position: relative;
        height: 218px;
    }

    .play {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        width: 50px;
        height: 50px;
    }

    video {
        display: block;
        width: 100%;
        height: 218px;
        object-fit: fill;
    }

    .footer {
        z-index: 999;
        position: absolute;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 60px;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%);
    }

    .footer img {
        width: 30px;
        height: 30px;
        margin: 0 15px;
    }

    .footer .time {
        min-width: fit-content;
        max-width: fit-content;
        color: #fff;
        font-size: 12px;
        margin-left: 13px;
    }

    .footer .full {
        width: 40px;
        height: 40px;
        margin: 0 8px;
    }

    .progress-box {
        position: relative;
        height: 4px;
        background: rgba(0, 0, 0, 0.48);
        border-radius: 2px;
        overflow: initial;
    }

    .progress {
        background-color: #fff;
        border-radius: 2px;
        width: 0%;
        height: 4px;
    }

    .point {
        position: absolute;
        top: 2px;
        left: 0%;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        border: 3px solid rgba(255, 255, 255, 0.35);
        box-sizing: content-box;
        transform: translate(-50%, -50%);
    }

    .point::before {
        content: ' ';
        position: absolute;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background-color: #fff;
    }

    .fixed-bottom {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 50px;
        box-sizing: content-box;
    }

    .fixed-bottom-left {
        position: relative;
        height: 50px;
        background: rgba(255, 255, 255, 1);
    }

    .fixed-bottom-left::before {
        content: ' ';
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        height: 1px;
        background-color: #d4d4d4;
        transform: scaleY(0.5);
    }


    .fixed-bottom-left-text {
        font-size: 15px;
        font-weight: 400;
        color: rgba(25, 25, 25, 1);
    }

    .fixed-bottom-right {
        min-width: 50%;
        height: 50px;
        background: rgba(90, 194, 255, 1);
    }

    .fixed-bottom-right-text {
        font-size: 15px;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
    }

    .fixed-bottom-left .fixed-bottom-img {
        box-shadow: 0px 3px 8px 0px rgba(253, 155, 67, 0.7);
        border-radius: 50%;
        width: 24px;
        height: 24px;
        margin-right: 8px;
    }

    .fixed-bottom-img {
        width: 40px;
        height: 40px;
    }

    .tab {
        z-index: 2;
        position: relative;
        height: 58px;
        padding-top: 8px;
        margin-top: -8px;
        background: rgba(255, 255, 255, 1);
        border-radius: 8px 8px 0px 0px;
        border-bottom: 1px solid rgba(212, 212, 212, 1);
    }

    .tab .item {
        position: relative;
        min-width: 50%;
        height: 50px;
    }

    .tab .item::after {
        display: none;
        content: "";
        position: absolute;
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
        width: 40px;
        height: 4px;
        background: rgba(90, 194, 255, 1);
        border-radius: 2px;
    }

    .tab .item .txt {
        font-size: 15px;
        font-weight: 600;
        color: rgba(25, 25, 25, 1);
    }

    .tab .active .txt {
        color: rgba(90, 194, 255, 1);
    }

    .tab .active::after {
        display: block;
    }

    .tab .item img {
        width: 17px;
        height: 17px;
        margin-left: 4px;
    }

    .my {
        box-sizing: content-box;
        height: calc(100vh - 318px);
        overflow-y: auto;
        padding: 0 15px;
    }

    .my .item {
        height: 58px;
    }

    .my .item .name {
        font-size: 15px;
        font-weight: 400;
        color: rgba(25, 25, 25, 1);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .my .btns {
        width: 100px;
        min-width: 100px;
        margin-left: 15px;
    }

    .my .btns img {
        width: 24px;
        height: 24px;
    }

    .all {
        box-sizing: content-box;
        height: calc(100vh - 318px);
        overflow-y: auto;
        padding: 0 15px;
    }

    .all .item {
        height: 58px;
    }

    .all .item .name {
        font-size: 15px;
        font-weight: 400;
        color: rgba(25, 25, 25, 1);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .all .btns {
        width: 100px;
        min-width: 24px;
    }

    .all .btns img {
        width: 24px;
        height: 24px;
    }

    .student-name {
        font-size: 12px;
        font-weight: 400;
        color: rgba(128, 128, 128, 1);
    }

    .marsk {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 50px;
        background-color: rgba(0, 0, 0, 0);
        z-index: 2;
    }

    .record-box {
        position: fixed;
        top: 268px;
        left: 0;
        right: 0;
        bottom: 50px;
        background-color: #fff;
        z-index: 3;
    }

    .record-box img {
        display: block;
        margin: 0 auto 10px;
        width: 90px;
        height: 90px;
    }

    .record-box p {
        font-size: 14px;
        font-weight: 400;
        color: rgba(25, 25, 25, 1);
        text-align: center;
    }

    .tips {
        margin-top: 50px;
        text-align: center;
    }

    .tips img {
        display: block;
        width: 150px;
        height: 150px;
        margin: 0 auto;
    }

    .tips span {
        font-size: 12px;
        font-weight: 400;
        color: rgba(128, 128, 128, 1);
        line-height: 17px;
    }
    </style>
</head>

<body>
    <div class="vueApp" v-cloak>
        <div class="video">
            <video id="video" autoplay="" @click="isShow = !isShow" preload="meta" x5-playsinline="" playsinline="" webkit-playsinline="" :src="videoURL" :poster="videoURL + '?x-oss-process=video/snapshot,t_10000,m_fast'">
                <source :src="videoURL" type="video/mp4" />
                <source :src="videoURL" type="video/ogg" />
                <source :src="videoURL" type="video/webm" />
            </video>
            <img class="play" @click="isPlay = true" v-show="!isPlay" src="../../image/ui/play.png" alt="">
            <div class="footer" v-show="isShow" data-flex="box:justify cross:center">
                <img @click="isPlay = !isPlay" :src="isPlay ? '../../image/ui/pause.png' : '../../image/ui/play_4.png'" alt="">
                <div class="progress-box" data-flex-box="1">
                    <div :style="'width:'+ (currentTime/videoDuration*100) +'%'" class="progress"></div>
                    <div :style="'left:'+ (currentTime/videoDuration*100) +'%'" class="point" id="point"></div>
                </div>
                <div class="time">{{ _current }}/{{ duration }}</div>
                <img class="full" src="../../image/ui/full.png" alt="" @click="toHorizontal">
            </div>
        </div>
        <div class="tab" data-flex>
            <div class="item" :class="{active: current === 0 }" @click="clickTab(0)" data-flex-box="1" data-flex="main:center cross:center">
                <div class="txt">我的卡拉OK</div>
            </div>
            <div class="item" :class="{active: current === 1 }" @click="clickTab(1)" data-flex-box="1" data-flex="main:center cross:center">
                <div class="txt">来自班级的分享</div>
                <img v-if="userType == 2" src="../../image/course/arrow.png" @click="clickSelectClass()" alt="">
            </div>
        </div>
        <div class="my" v-show="current === 0">
            <div v-for="item,index in myKarokeGroup" class="item" data-flex="cross:center">
                <div class="name" data-flex-box="1">{{ item.dubName }}</div>
                <div class="btns" data-flex="main:justify">
                    <img :src="current +''+ index === currentPlay && isPlay ? '../../image/ui/pause_4.png' : '../../image/ui/play_8.png'" @click="clickPlay(index)" alt="">
                    <img src="../../image/course/share.png" @click="clickShare(item)" alt="">
                    <img src="../../image/course/delete.png" @click="clickDelete(index)" alt="">
                </div>
            </div>
            <div class="tips" v-show="myNull">
                <img src="../../image/ui/my_null.png" alt="">
                <span>您还没有录音,快来唱唱看吧!</span>
            </div>
        </div>
        <div class="all" v-show="current === 1">
            <div v-for="item,index in classShareGroup" class="item" data-flex="cross:center">
                <div data-flex-box="1">
                    <div class="name">{{ item.dubName }}</div>
                    <div class="student-name">来自: {{ item.nickName }}</div>
                </div>
                <div class="btns" data-flex="main:right">
                    <img :src="current +''+ index === currentPlay && isPlay ? '../../image/ui/pause_4.png' : '../../image/ui/play_8.png'" @click="clickPlay(index)" alt="">
                </div>
            </div>
            <div class="tips" v-show="shareNull">
                <img src="../../image/ui/share_null.png" alt="">
                <span>暂无分享呢~</span>
            </div>
        </div>
        <div v-if="isRecord">
            <div class="marsk" :style="'bottom:'+footerH+'px'"></div>
            <div class="record-box" data-flex="main:center cross:center" :style="'bottom:'+footerH+'px'">
                <div @click="handleRecord()">
                    <img src="../../image/course/sent_record.gif" alt="">
                    <p>正在录制，点击停止录制…</p>
                </div>
            </div>
        </div>
        <footer id="footer" class="fixed-bottom" data-flex>
            <div class="fixed-bottom-left" data-flex-box="1" data-flex="main:center cross:center" @click="clickPlayOriginal">
                <img class="fixed-bottom-img" :src="playOriginal && isPlay? '../../image/ui/pause_5.png' : '../../image/ui/play_2.png'" alt="">
                <div class="fixed-bottom-left-text">播放原音</div>
            </div>
            <div @click="handleRecord()" class="fixed-bottom-right" data-flex-box="1" data-flex="main:center cross:center">
                <img class="fixed-bottom-img" src="../../image/course/sing.png" alt="">
                <div class="fixed-bottom-right-text">我也要唱</div>
            </div>
        </footer>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/service/service-tool.js"></script>
<script type="text/javascript" src="../../script/service/service-app.js"></script>
<script type="text/javascript" src="../../script/service/service-user.js"></script>
<script type="text/javascript" src="../../script/service/service-logic.js"></script>
<script type="text/javascript" src="../../script/service/service-pic.js"></script>
<script type="text/javascript" src="../../script/jquery.min.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/saveFiles2.js"></script>
<script type="text/javascript" src="../../script/audio.js"></script>
<script type="text/javascript">
// html 的引号一律为双引号(""),js 为单引号('')
var USER, $S, vm;
var pageParam = {},
    delIndex = -1,
    video;
var isTouch = false;
var videoModule = null;
apiready = function() {
    $S = SERVICE();
    USER = USER();
    console.log(JSON.stringify(api.pageParam) + '=====pageParam');
    pageParam = api.pageParam;
    videoModule = api.require('tinyPlayer');
    fnInit();
    // Audio.init([{'src': pageParam.videoBgm}], false);
    fnInitAliYunOss();
};
// 初始化
function fnInit() {
    vm = new Vue({
        el: '.vueApp',
        data: {
            // 我的卡拉OK是否为空
            myNull: false,
            // 班级分享是否为空
            shareNull: false,
            // 用户类型 1 学生 2老师
            userType: getUserType(),
            // 当前选中的tab
            current: 0,
            // 当前播放的项
            currentPlay: '',
            // 视频地址
            videoURL: pageParam.video,
            // 是否播放,默认为否
            isPlay: false,
            // 是否显示控制台, 默认为否
            isShow: true,
            // 视频总时长
            videoDuration: 0,
            // 视频当前播放进度
            currentTime: 0,
            myKarokeGroup: [],
            classShareGroup: [],
            playOriginal: true,
            classId: USER.Get('classId'),
            isRecord: false,
            footerH: 50,
            dataName: pageParam.questionName
        },
        methods: {
            clickTab: function(newVal) {
                if (newVal == 1) {
                    if (this.userType == 2 && !this.classId) {
                        fnToast('请先选择班级');
                        clickSelectClass();
                    } else if (this.userType == 1 && !this.classId) {
                        fnToast('您还未加入班级');
                    } else {
                        this.current = newVal;
                    }
                } else {
                    this.current = newVal;
                }
            },
            clickPlay: function(index) {
                var currentPlay = this.current + '' + index;
                if (this.currentPlay != currentPlay) {
                    this.currentPlay = currentPlay;
                    var item = this.current === 1 ? this.classShareGroup[index] : this.myKarokeGroup[index];
                    this.videoURL = item.dubAudioUrl;
                    // vm.isPlay = true;
                } else {
                    this.isPlay = !this.isPlay;
                }
                this.playOriginal = false;
            },
            clickPlayOriginal: function() {
                if (vm.isRecord) {
                    fnToast('录音中，不能播放');
                    return;
                }
                this.currentPlay = '';
                this.playOriginal = !this.playOriginal;
                if (this.playOriginal) {
                    vm.videoURL = pageParam.video;
                    vm.isPlay = true;
                } else {
                    vm.isPlay = false;
                }
            }
        },
        computed: {
            _current: function() {
                time = parseInt(this.currentTime);
                var s = time % 60,
                    m = (time - s) / 60;
                return (m > 9 ? m : '0' + m) + ':' + (s > 9 ? s : '0' + s);
            },
            duration: function() {
                time = parseInt(this.videoDuration);
                var s = time % 60,
                    m = (time - s) / 60;
                return (m > 9 ? m : '0' + m) + ':' + (s > 9 ? s : '0' + s);
            }
        },
        watch: {
            isPlay: function() {
                setTimeout(function() {
                    if (vm.isPlay) {
                        video.play();
                    } else {
                        video.pause();
                    }
                }, 100)
            },
            videoURL: function() {
                setTimeout(function() {
                    if (vm.isPlay) {
                        video.play();
                    }else {
                        video.pause();
                    }
                    // videoLinstener();
                }, 100)
            }
        }
    });
    if(!vm.classId && vm.userType == 1) {
        $S.POST('clsClass/findClassesList', {}, function(ret) {
            if(ret.status == 200 && ret.data.listData.length > 0) {
                vm.classId = ret.data.listData[0].id;
                getClassShareGroup();
            };
        });
    }
    videoLinstener();
    vm.footerH = AD('footer').offsetH();
    getMyKarokeGroup();
    if (vm.userType == 1 && vm.classId) {
        getClassShareGroup();
    }
    fnAddSliderEvent();
}

// 打开视频播放器模块
function fnOpenVideoPlayer() {
    videoModule.showInView({
        rect: { x: 0, y: 0, w: 'auto', h: 218 },
        fixedOn: api.frameName,
        fixed: true,
        radius: 2, //圆角大小 默认 0 没有圆角
        showBack: false, //返回按钮是否显示小屏幕
        showSelect: false, //选集按钮是否显示
        showSpeed: false, //倍速按钮是否显示
        showShot: false, //截图按钮是否显示
        showBottomProcess: true,
        autoPlay: true, //默认false
        openCache: true, //是否开启缓存
        hideControl: true, //是否隐藏所有控件
        backgroundHolder: pageParam.videoBgm + '?x-oss-process=video/snapshot,t_100,m_fast', //视频背景图片
        backgroundAlpha: 0.3, //0 背景透明度
        loop: false, //是否单急循环
        styles: [],
        index: 0,
        data: [{
                uid: '', //扩展字段 用户id(可选，会随事件返回)
                vid: '', //扩展字段 视频id(可选，会随事件返回)
                title: '',
                index: '01',
                thumb: pageParam.videoBgm + '?x-oss-process=video/snapshot,t_100,m_fast',
                url: pageParam.videoBgm
            }]
    });
}

// 监听视频事件
function videoLinstener() {
    video = document.getElementById('video');
    video.addEventListener('durationchange', function() {
        vm.videoDuration = this.duration;
    })
    video.addEventListener('timeupdate', function() {
        if (!isTouch) {
            vm.currentTime = this.currentTime;
        }
    });
    video.addEventListener("ended", function() {
        vm.isPlay = false;
    });
    vm.isPlay = true;
}

// 切换横屏
function toHorizontal() {
    fnOpenWin({
        name: 'video_horizontal',
        url: '../video/video_horizontal.html',
        pageParam: {
            currentTime: vm.currentTime,
            video: {
                videoUrl: vm.videoURL
            },
            isPlay: vm.isPlay,
            winName: api.winName,
            frmName: api.frameName
        },
        slidBackEnabled: false
    });
    api.setScreenOrientation({
        orientation: 'landscape_left'
    });
    // 不加该代码视频会有BUG
    vm.isPlay = false;
}

// 继续播放
function resumePlay(time, isPlay) {
    video.currentTime = time;
    vm.isPlay = isPlay;
}

// 我也要唱
function handleRecord() {
    vm.isPlay = false;
    if (!vm.isRecord) {
        fnOpenAlert({
            alertType: '22',
            alertConfirmFn: 'fnConfirmRecordCallback()'
        });
    } else {
        fnConfirmRecordCallback();
    }
}

function fnConfirmRecordCallback() {
    vm.isRecord = !vm.isRecord;
    if (vm.isRecord) {
        // 开始录音
        var initCallback = function(isSuccess) {
            if (isSuccess && pageParam.videoBgm) {
                // 成功
                vm.currentTime = 0;
                vm.isPlay = false;
                vm.playOriginal = false;
                // vm.videoURL = pageParam.videoBgm;
                vm.isShow = true;
                fnOpenVideoPlayer();
            } else {
                // 失败
                vm.isRecord = false;
                vm.isPlay = false;
                videoInit();
            }
        };
        createFile(new Date().getTime(), initCallback);
        // if(pageParam.videoBgm) {
        //     vm.currentTime = 0;
        //     vm.isPlay = true;
        //     vm.playOriginal = false;
        //     vm.videoURL = pageParam.videoBgm;
        //     vm.isShow = true;
        //     // var isFirst = true;
        //     // vm.$nextTick(function() {
        //     //     var _video = document.getElementById('video');
        //     //     _video.addEventListener('play', function() {
        //     //         if(vm.isRecord && isFirst) {
        //     //             isFirst = false;
        //     //             createFile(new Date().getTime(), recordCallback);
        //     //         }
        //     //     });
        //     // });
        // }else {
        //     createFile(new Date().getTime(), recordCallback);
        // }
    } else {
        // 停止录音
        stopRecord(recordCallback);
        videoInit();
        videoModule.hidePlay();
    }
}

// 保存录音
function fnSaveRecord(path) {
    api.showProgress({
        text: '录音上传中...',
        modal: true
    });
    var callback = function(url) {
        api.hideProgress();
        uploadRecordData(url);
    };
    fnUploadObsFile(path, callback);
    console.log('fnSaveRecord=====' + path);
    // api.startPlay({
    //     path: path
    // }, function(ret, err) {
    //     if (ret) {
    //         console.error('播放成功==='+JSON.stringify(ret));
    //     }else {
    //         console.error(JSON.stringify(err));
    //     }
    // });
}

// 录音结束回调
function recordCallback(path) {
    if (path) {
        fnOpenAlert({
            alertType: '21',
            alertConfirmFn: 'fnSaveRecord("' + path + '")'
        });
    } else {
        // 开启录音失败
        vm.isRecord = false;
        vm.isPlay = false;
        videoInit();
    }
}

// 点击选择班级
function clickSelectClass() {
    fnOpenPublicWin('选择班级', 'class/select_class', { 'from': 'karaoke' });
}
// 选择完班级
function setSelectedClass(ids) {
    vm.current = 1;
    vm.classId = ids;
    getClassShareGroup(ids);
}
// 点击分享
function clickShare(item) {
    if (vm.userType == 1) {
        // 学生
        if (!vm.classId) {
            fnToast('您还未加入班级');
            return;
        } else {
            var url = 'question/shareDub';
            var params = {
                'clsClassesId': vm.classId,
                'id': item.id
            };
            var callback = function(data) {
                fnToast('分享成功');
                getClassShareGroup(vm.classId);
            };
            POST(url, params, callback);
        }
    } else {
        fnOpenFrame({
            name: 'share_frm',
            url: '../share.html',
            pageParam: {
                businessId: item.id,
                shareType: 'karaoke',
                from: 'karaoke',
                buss: 'share',
                shareTitle: item.dubName,
                sharePage: 'karaoke_detail',
                url: item.dubAudioUrl
            }
        });
        // 老师
        // fnOpenPublicWin('选择班级','class/select_class', {
        //     businessId: item.id,
        //     from: 'karaoke',
        //     buss: 'share'
        // });
    }
}
// 点击删除
function clickDelete(index) {
    delIndex = index;
    fnOpenAlert({
        alertType: 5,
        alertConfirmFn: 'confirmDelate'
    })
}

// 获取我的卡拉OK数据
function getMyKarokeGroup() {
    var url = 'question/findDubDetailList';
    var params = {
        id: pageParam.id
    };
    var callback = function(data) {
        var listData = data.listData;
        vm.myKarokeGroup = listData;
        vm.$nextTick(function() {
            if (vm.myKarokeGroup.length === 0) {
                vm.myNull = true;
            } else {
                vm.myNull = false;
            }
        });
    };
    POST(url, params, callback);
}

// 获取班级分享数据
function getClassShareGroup(ids) {
    var url = 'question/findClassesShareList';
    var params = {
        'clsClassesId': ids || vm.classId,
        'questionLibraryId': pageParam.id
    };
    var callback = function(data) {
        vm.classShareGroup = data.listData;
        vm.$nextTick(function() {
            if (vm.classShareGroup.length === 0) {
                vm.shareNull = true;
            } else {
                vm.shareNull = false;
            }
        });
    };
    POST(url, params, callback);
}

// 确认删除后执行
function confirmDelate() {
    var item = vm.myKarokeGroup[delIndex];
    var url = 'question/deleteDubById';
    var params = {
        id: item.id
    };
    var callback = function(data) {
        fnToast('删除成功');
        videoInit();
        getMyKarokeGroup();
        getClassShareGroup(vm.classId);
    };
    POST(url, params, callback);
}

// 提交录音
function uploadRecordData(record) {
    var url = 'question/compareAnswer';
    var params = {
        id: pageParam.id,
        otherInfo: record,
        questionTypeCode: pageParam.code
    };
    var callback = function(data) {
        fnToast('提交成功');
        getMyKarokeGroup();
    };
    POST(url, params, callback);
}

// 视频回到原音初始化
function videoInit() {
    vm.currentTime = 0;
    vm.isPlay = false;
    vm.videoURL = pageParam.video;
    vm.currentPlay = '';
}

function fnAddSliderEvent() {
    var startX;
    var startY;
    var currentX;
    var currentY;
    var progressWidth = document.getElementsByClassName('progress-box')[0].clientWidth;
    var point = document.getElementsByClassName('point')[0];
    point.addEventListener('touchstart', function(event) {
        startX = event.touches[0].clientX;
        startY = event.touches[0].clientY;
        isTouch = true;
    })

    point.addEventListener('touchmove', function(event) {
        var progressBox = document.getElementsByClassName('progress-box')[0];
        // 防止拖动超出进度条
        if (event.touches[0].clientX >= progressBox.offsetLeft && event.touches[0].clientX <= progressBox.offsetLeft + progressWidth - 6) {
            currentX = event.touches[0].clientX;
        }
        currentY = event.touches[0].clientY;
        var distance = currentX - startX;
        startX = currentX;
        if (distance) {
            var time = vm.videoDuration * (distance / progressWidth);
            vm.currentTime = vm.currentTime + time;
            video.currentTime = vm.currentTime;
        }
    })

    point.addEventListener('touchend', function() {
        isTouch = false;
    })
}
</script>

</html>